<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    transferData: {
      type: Array
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      detecTime: [],
      names: [],
      series: []
    }
  },
  watch: {
    /*
    transferData:{
      handler(newVal){
        console.log(newVal);
        this.names = [];
        this.series = [];
        for(let i=0;i<newVal.length;i++){
          this.names.push(newVal[i].studentName);
          let data = [];
          newVal[i].cropDataList.forEach(item=>data.push([item.detectionTime,item.average]))
          this.series.push({
            name:newVal[i].studentName,
            type:'line',
            data
          })
        };
        this.detecTime = [];
        if(newVal.length){
          newVal[0].cropDataList.forEach(item=>this.detecTime.push(item.detectionTime));
        }
        console.log(this.names);
        console.log(this.detecTime);
        console.log(this.series);
        this.initChart();
      },
      immediate:true
    }
    */
  },
  created() {
    console.log(this.transferData)
    // this.updateData(this.transferData);
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      this.chart.setOption({
        backgroundColor: '',
        title: {
          top: 20,
          text: '',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: this.names,
          right: '4%',
          textStyle: {
            fontSize: 12,
            color: 'black'
          }
        },
        grid: {
          top: 100,
          left: '2%',
          right: '2%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          data: this.detecTime
        }],
        yAxis: [{
          type: 'value',
          name: '(cm)',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: this.series
      })
    },
    updateData(newVal) {
      this.names = []
      this.series = []
      for (let i = 0; i < newVal.length; i++) {
        this.names.push(newVal[i].studentName)
        const data = []
        newVal[i].cropDataList.forEach(item => data.push([item.detectionTime, item.average]))
        this.series.push({
          name: newVal[i].studentName,
          type: 'line',
          data
        })
      }
      this.detecTime = []
      for (let i = 0; i < newVal.length; i++) {
        newVal[i].cropDataList.forEach(item => this.detecTime.indexOf(item) == -1 && this.detecTime.push(item.detectionTime))
      }
      console.log(this.names)
      console.log(this.detecTime)
      console.log(this.series)
      this.initChart()
    }
  }
}
</script>
